zizhujianzhan_web/pages/[dir]/list-[id].vue

<template>
    <!-- 头部 -->
    <templateHead v-if="skinId<=4"></templateHead>
    <!-- 皮肤5头部 -->
    <templateHead5 v-if="skinId==5"></templateHead5>
    <!-- 菜单 -->
    <templateMenu v-if="skinId<=4"></templateMenu>
    <!-- 皮肤5菜单 -->
    <templateMenu5 v-if="skinId==5"></templateMenu5>
    <!-- 内容 -->
    <div v-for="(item,index) in templateData" :key="index">
        <!--广告组件-->
        <div v-if="item.sectorName=='adSector'">
            <templateAd :skinId="skinId" :adData="adData" :adTag="item.ad.ad_tag" ></templateAd>
        </div>
        <!--列表组件-->
        <div v-if="item.sectorName=='fixedListSector'">
            <templateList :skinId="skinId" :templateData="item.componentList" :routeId="routeId" :pageData="pageData" :newsList="newsList"></templateList>
        </div>
        <!-- 皮肤5列表组件 -->
        <div v-if="item.sectorName=='newsListSector' && skinId==5">
            <templateList5 :skinId="skinId" :templateData="item.componentList" :routeId="routeId" :pageData="pageData" :newsList="newsList1"></templateList5>
        </div>
    </div>
    <!-- 底部 -->
    <templateFoot v-if="skinId<=4"></templateFoot>
    <!-- 皮肤5底部 -->
    <templateFoot1 v-if="skinId==5"></templateFoot1>
</template>

<script setup lang="ts">
//0.加载全局模板组件 start---------------------------------------->
import type { IListData } from '@/utils/dataInterface';
//0.1全局通栏
import templateHead from '@/components/template/sector/head/1200x200/1.vue'
import templateHead5 from '@/components/template/sector/head/1200x250/1.vue'
import templateMenu from '@/components/template/sector/menu/1200x130/1.vue'
import templateMenu5 from '@/components/template/sector/menu/1200x187/1.vue'
import templateFoot from '@/components/template/sector/foot/1200x580/1.vue'
import templateFoot1 from '@/components/template/sector/foot/1200x680/1.vue'
//0.2局部通栏
//0.2.1广告组件
import templateAd from '@/components/template/sector/body/ad/1200x90/1.vue'
//0.2.2列表组件
import templateList from '@/components/template/sector/body/list/list/1200x1220/1.vue'
import templateList5 from '@/components/template/sector/body/list/list/1200x2250/1.vue'
//0.加载全局模板组件 end---------------------------------------->

//1.获得基本信息单元 start---------------------------------------->
//1.1获得页面依赖
import { ref, onMounted } from 'vue';
//1.2使用url查询导航池id
const targetSegment = getRoutePath(1);//当前页面的url路径 这是第一层 所以获得域名后面的第一层url
const routeId = ref<number>(0);//当前url路径代表的cid
const getRouteId:any = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    routeId.value = getRouteId.data.category_id
}
//1.3获得pinia源
import { useTemplateBaseStore } from '@/stores/templateBase'
const templateBaseStore:any = useTemplateBaseStore()
//1.4获得该页的皮肤id - 在每个组件中也是同样的获得方法
const skinId = ref<number>(0)
const websiteId = ref<number>(0)
//1.5获得站点基本信息
const responseStatus:any = await requestDataPromise('/web/getWebsiteAllinfo', {
    method: 'GET',
    query: {
        'link_textnum':24,
        'link_imgnum':18,
        'link_footnum':4
    },
});
if (responseStatus.code == 200) {
    if(responseStatus.data.website_foot.foot_info.status == 1){
        //网站模板已停用，直接转入404页面
        navigateTo('/error?findPage=index')
    }else{
        //1.6.1设置站点基本信息
        templateBaseStore.setWebSiteInfo(responseStatus.data)
        websiteId.value = responseStatus.data.website_head.id;//获得网站id
        //1.6.2设置皮肤id
        skinId.value = templateBaseStore.webSiteInfo.website_foot.foot_info.template_id;
    }
}
//1.6.seo
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': routeId.value
    },
});
let seoTitle = setData.data.seo_title;
let seoDescription = setData.data.seo_description;
let seoKeywords = setData.data.seo_keywords;
let seoSuffix = setData.data.suffix;
let seoName = setData.data.website_name;
useHead({
    title: seoTitle + "_" + seoName + "_" + seoSuffix,
    meta: [
        { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
        { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
    ]
});
//1.获得基本信息单元 end---------------------------------------->

//2.页面数据 start---------------------------------------->
//2.1获得页面模板数据
const response = await requestDataPromise('/client/indexData', {
    method: 'POST',
    body: {
        'website_id':websiteId.value,
        'getpage':'index'
    },
});
//页面模板数据
const templateData = response.data.template.list;
//是否启用搜索功能
templateBaseStore.setIsSearch(response.data.isSearch)
console.log(templateData)
//2.2广告数据
const adData = ref<any[]>([]);
adData.value.push(response.data.ad.top)
for(let item of response.data.ad.list){
    adData.value.push(item)
}
templateBaseStore.setAdList(adData.value)
//2.3分页数据
const route:any = useRoute();
let pageNum = ref(1); //当前页码
pageNum.value = parseInt(route.params.id);//路由中传递的分页页码
let total = ref(0); //总条数
let pageSize = ref(20); //每页条数
//3.1新闻列表数据
const newsList = ref<IListData[]>([]);
let newslists = async () => {
    const listData = await requestDataPromise('/web/getWebsiteArticleList', {
        method: 'GET',
        query: {
            'page': pageNum.value,
            'pageSize': pageSize.value,
            'catid': routeId.value
        },
    });
    console.log(listData)
    if (listData.code == 200) {
        newsList.value = listData.data.rows;
        pageData.value.total =  listData.data.count;
    }
}
newslists();
const newsList1 = ref<IListData[]>([]);
let newslists1 = async () => {
    const listData = await requestDataPromise('/web/getWebsiteArticleList', {
        method: 'GET',
        query: {
            'page': pageNum.value,
            'pageSize': 10,
            'catid': routeId.value
        },
    });
    console.log(listData)
    if (listData.code == 200) {
        newsList1.value = listData.data.rows;
        pageData.value.total =  listData.data.count;
    }
}
newslists1();
let pageData = ref({
    "pageNum": pageNum.value,
    "pageSize": pageSize.value,
    "total": total.value
});
//2.页面数据 end---------------------------------------->
</script>

<style lang="less" scoped>
@import url('@/assets/css/list.less');
</style>